<template>
  <div class="title">
    <div class="top">
      <div></div>
      <div>{{ contentTableConfig.title }}</div>
      <div class="top_right">
        <span class="item" @click="handle_wiki">Wiki</span>
      </div>
    </div>
    <div class="line"></div>
  </div>
  <div class="rework">
    <div class="page-content">
      <lz-table
        :listData="dataList"
        :listCount="dataCount"
        v-bind="contentTableConfig"
        v-model:page="pageInfo"
      >
        <!-- 1.header中的插槽 -->
        <template #headerLeft>
          <el-button
            class="active"
            :type="current_tab.activeType"
            size="default"
            @click="handleActive"
          >
            Active
          </el-button>
          <el-button
            class="active"
            :type="current_tab.archiveType"
            size="default"
            @click="handleArchive"
          >
            Archive
          </el-button>
        </template>

        <!-- 2.header 中间的插槽 -->
        <!-- 3.header 右边的插槽 -->
        <template #headerHandler>
          <el-button type="primary" size="default" @click="handleFilter">
            Filter
          </el-button>
          <!-- <el-button
            type="primary"
            size="default"
            @click="handleImport"
            v-if="current_tab.isArchive == '1'"
          >
            Import
          </el-button> -->

          <template v-if="isSuper">
            <el-button
              v-if="is_archive == '1'"
              type="primary"
              size="default"
              @click="handleExport"
            >
              Export
            </el-button>
          </template>
        </template>

        <!-- 4.列中的插槽 -->
        <template #status="scope">
          <el-button
            plain
            size="small"
            :type="scope.row.enable ? 'success' : 'danger'"
          >
            {{ scope.row.enable ? 'Enable' : 'Disable' }}
          </el-button>
        </template>

        <template #createAt="scope">
          <span>{{ scope.row.create_at }}</span>
        </template>
        <template #updateAt="scope">
          <span>{{ scope.row.update_at }}</span>
        </template>

        <!-- <template v-if="isSuper" #handler="scope">
          <div class="handle-btns">
            <el-button
              v-if="is_archive == '1'"
              size="small"
              type="primary"
              round
              plain
              @click="handleUpdateClick(scope.row)"
            >
              Update
            </el-button>
            <el-button
              v-if="is_archive == '1'"
              size="small"
              type="danger"
              round
              plain
              @click="handleArchiveClick(scope.row)"
              >Archive</el-button
            >
            <el-button
              v-if="is_archive == '2'"
              size="small"
              type="primary"
              round
              plain
              @click="handleArchiveClick(scope.row)"
              >Active</el-button
            >
            <el-button
              v-if="is_archive == '2'"
              size="small"
              type="danger"
              round
              plain
              @click="handleDeleteClick(scope.row)"
              >Delete</el-button
            >
          </div>
        </template> -->

        <!-- footer -->
        <!-- <template #footerLeft>
          <div class="tips">* User.</div>
        </template> -->
      </lz-table>
    </div>
  </div>
  <filter-dialog
    ref="filter_dialog_ref"
    v-model:filter_field="filter_field"
    :parentMethod="getPageData"
    v-bind="modalConfig"
    :pageInfo="pageInfo"
    @filterClick="onFilterClick"
  ></filter-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue'
import { useStore } from '@/store'
// import { ElMessageBox } from 'element-plus'
import { usePermission } from '@/hooks/use-permission'
import LzTable from '@/base-ui/table'
// import localCache from '@/utils/cache'
import { contentTableConfig } from './config/content.config'
import { getPageListData } from '@/service/main/system/system'
import { FilterDialog } from '@/components/dialog'
import { modalConfig } from './config/modal.config'

import { BASE_ROUTE } from '@/service/request/config'

const store = useStore()
let is_archive = ref('1') // 1: active  2: archive
const current_tab = reactive({
  activeType: 'primary',
  archiveType: 'info',
  // isArchive: is_archive.value, // 1: active  2: archive
  isEdit: true
})
const filter_field = reactive({
  // enable: true
  is_archive: '1'
})

const isSuper = usePermission('user', 'super')
// const isGeneral = usePermission('user', 'general')

// 1.双向绑定pageInfo
const pageInfo = reactive({ currentPage: 1, pageSize: 10 })
watch(pageInfo, () => getPageData())

// 2.发送网络请求
const getPageData = async (filter_field: any = {}) => {
  console.log('requet user data')
  store.dispatch('system/getPageListAction', {
    pageName: 'user',
    queryInfo: {
      offset: (pageInfo.currentPage - 1) * pageInfo.pageSize,
      size: pageInfo.pageSize,
      filter_field
    }
  })

  // const dataResult = await getPageListData('user/get_user_list', {
  //   offset: (pageInfo.currentPage - 1) * pageInfo.pageSize,
  //   size: pageInfo.pageSize,
  //   filter_field
  // })
  // console.log('res: ', dataResult.data)
  // data_res.dataList = dataResult.data.list
  // data_res.dataCount = dataResult.data.totalCount
}

getPageData(filter_field)

const dataList = computed(() => store.getters[`system/pageListData`]('user'))
const dataCount = computed(() => store.getters[`system/pageListCount`]('user'))

const handleActive = () => {
  console.log('click active btn')
  current_tab.activeType = 'primary'
  current_tab.archiveType = 'info'
  is_archive.value = '1'
  filter_field.is_archive = '1'
  console.log(filter_field)
  getPageData(filter_field)
}

const handleArchive = () => {
  console.log('click archive btn')
  current_tab.activeType = 'info'
  current_tab.archiveType = 'primary'
  is_archive.value = '2'
  filter_field.is_archive = '2'
  console.log(filter_field)
  getPageData(filter_field)
}

const handle_wiki = () => {
  console.log('handle click wiki')
  window.open(BASE_ROUTE + '/static/data/rework_wiki.pdf', '_blank')
}

const filter_dialog_ref = ref<InstanceType<typeof FilterDialog>>()
const handleFilter = () => {
  console.log('click filter...')
  // console.log(filter_dialog_ref.value.filter_dialog)
  filter_dialog_ref.value.filter_dialog = true
}

const onFilterClick = () => {
  console.log('filter click')
  console.log(filter_field)
}

const handleExport = async () => {
  console.log('click export')
  console.log(filter_field)
  const pageUrl = `/user/export_user_list`
  const pageResult = await getPageListData(pageUrl, { filter_field })
  console.log(pageResult)
  window.open(BASE_ROUTE + pageResult.data.filepath)
}
</script>

<style>
.dialog .el-form-item {
  margin-bottom: 0px;
}
.dialog .el-form-item__content {
  margin: auto;
}
.dialog .el-input {
  width: 100% !important;
}
.export-dialog .el-select {
  width: 100% !important;
}
.dialog .el-input__inner {
  height: 30px;
}
.dialog .el-input__suffix {
  top: -5px;
}
.dialog .el-select {
  width: 100% !important;
}
.dialog .el-dialog__body {
  padding: 0;
  padding-left: 10px;
}
.export-dialog .el-dialog {
  background: blueviolet;
  border-radius: 20px;
}
.export-dialog .el-dialog__header {
  height: 0;
  padding: 0;
}
.export-dialog .el-dialog__body {
  padding: 10px;
}
.export-dialog .el-form-item__label {
  color: #fff;
}
</style>
<style scoped lang="less">
.dialog_row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  .select_left {
    font-weight: 600;
  }
  .select_right {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
.header_title {
  position: absolute;
  top: 10px;
  font-size: 18px;
  color: blueviolet;
  text-align: center;
  line-height: 32px;
  .item {
    margin-left: 10px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .item:hover {
    color: blueviolet;
    opacity: 0.8;
  }
}
.line {
  /* width: 98%; */
  height: 3px;
  margin: 20px auto;
  border-bottom: 1px solid #000;
  /* border-top: 1px solid #000; */
}
.title {
  font-size: 28px;
  font-weight: 600;
  .noted {
    font-size: 14px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    background: red;
  }
  .top {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    .top_right {
      margin-right: 20px;
      font-size: 18px;
      color: blueviolet;
      text-align: center;
      line-height: 32px;
    }
    .back {
      margin-left: 10px;
      font-weight: 700;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .line {
    width: 98%;
    height: 3px;
    margin: 10px auto;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
  }
  .item {
    margin-left: 10px;
    cursor: pointer;
    text-decoration: underline;
  }
  .item:hover {
    color: blueviolet;
    // font-size: 18px;
    opacity: 0.8;
  }
}

.rework {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
.tips {
  color: blueviolet;
  font-weight: 600;
  font-size: 13px;
  align-items: center;
}
.rework_id:hover {
  color: #000;
  font-size: 16px;
  cursor: pointer;
}
.active {
  border-radius: 0 20px 0 0;
  // width: 100px;
}
.dialog .el-form {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  .sow {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-button--mini {
      height: 20px;
    }
  }
}

.export-dialog {
  .title {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
  }
  .line {
    width: 98%;
    height: 3px;
    margin: 10px auto;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
  }
  .top {
    display: grid;
    grid-template-columns: repeat(2, 50%);
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .date_span {
    color: #fff;
    margin: 0 20px;
  }
  .el-form {
    padding: 10px;
  }
}

.inline {
  display: inline-block;
  margin-left: 10px;
}
</style>
